<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="application/javascript">
        let errorStatus = {
            404: function (){
                alert("该资源不存在")
            },
            500: function (){
                alert("系统异常，请稍后再试")
            }
        }
        $(function (){
            $("#btn1").click(function (){
                $.ajax({
                    url: "http://localhost:8080/rest/cou/" + $("#id").val(),
                    async: true,
                    type: "GET",
                    contentType: 'application/json',
                    success:function (cou){
                        let html = "";
                        html += "课程编号:";
                        html += cou.cno;
                        html += "<br/>";
                        html += "课程名:";
                        html += cou.cname;
                        html += "<br/>"
                        html += "学分:";
                        html += cou.points;
                        html += "<br/>"
                        html += "课程封面:<img src='http://localhost:8080/cou/"+cou.img+"'>";
                        html += "<br/>"

                        $("#div1").html(html);

                    },
                    statusCode: errorStatus
                })
            })
            $("#btn2").click(function () {
                $.ajax({
                    url: "http://localhost:8080/rest/cou/",
                    async: true,
                    type: "GET",
                    contentType: 'application/json',
                    success: function (list) {
                        let html = "<table border='1'>";
                        html += "<tr><th>ID</th><th>课程编号</th><th>课程名</th><th>学分</th><th>封面</th></tr>"
                        $.each(list, function (i, cou) {
                            // console.log(cou)
                            html += "<tr>"
                            html += "<td>" + cou.id+ "</td>"
                            html += "<td>" + cou.cno + "</td>"
                            html += "<td>" + cou.cname + "</td>"
                            html += "<td>" + cou.points + "</td>"
                            html += "<td>"+ "<img src='http://localhost:8080/cou/"+cou.img+"'></td>"
                            html += "</tr>"
                        })
                        html += "</table>"
                        $("#div2").html(html);

                    },
                    statusCode: errorStatus
                })
            })

        })



    </script>
</head>
<body>
请输入课程的ID:<input type="text" id="id">
<button id="btn1">查询</button>
<p/>
<button id="btn2">查询所有课程的信息</button>
<p/>
<button id="btn3">添加课程信息</button>
<p/>
请输入课程ID<input type="text" id="id2"><button id="btn4">修改课程信息</button>
<p/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3" style="display: none">


</div>
</body>
</html>